<template>
    <div class="customer-page" style="margin-left: 15px; margin-top: 15px;">
        <!-- 搜索条件 -->
        <el-form :inline="true" :model="keyword" label-width="95px">
            <el-form-item label="员工姓名">
                <el-input v-model="keyword.staffName" placeholder="员工姓名"></el-input>
            </el-form-item>
            <el-form-item label="员工类型">
                <el-select v-model="keyword.jobCategory" placeholder="员工类型">
                    <el-option v-for="item in categoryList" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 30px;">
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" icon="el-icon-delete" @click="handleDleteBatch">删除</el-button>
            </el-form-item>
            <el-form-item style="margin-right: 10px;">
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain icon="el-icon-download" @click="downloadExcel">导出</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain size="primary" @click="resetSearchForm('searchForm')"
                    icon="el-icon-refresh">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table :data="tableData" tooltip-effect="dark" class="customer-table"
            @selection-change="handleSelectionChange" width="100%">
            <el-table-column type="selection" width="50" />
            <el-table-column label="序号" width="50">
                <template #default="scope">{{ scope.$index + 1 + (currentPage - 1) * pageSize }}</template>
            </el-table-column>
            <el-table-column prop="ownerName" label="业主名称" width="100" align="center" />
            <el-table-column prop="houseLocation" label="住址" width="170" align="center" />
            <el-table-column prop="gender" label="性别" width="100" align="center" />
            <el-table-column prop="serviceDate" label="下单时间" width="170" align="center" />
            <el-table-column prop="jobCategory" label="类别" width="100" align="center" />
            <el-table-column prop="staffName" label="员工名称" width="100" align="center" />
            <el-table-column prop="contactNumber" label="联系电话" width="140" align="center" />
            <el-table-column prop="serviceFee" label="费用" width="100" align="center" />
            <el-table-column prop="paymentStatus" label="支付状态" width="140" align="center" />
            <el-table-column prop="comments" label="评价" width="140" align="center" />
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total" class="pagination">
        </el-pagination>

        <!-- 编辑弹窗 -->
        <el-dialog title="编辑客户" :visible.sync="editDialogVisible" width="50%">
            <el-form ref="editForm" :model="editForm" label-width="100px">
                <el-form-item label="业主名称">
                    <el-input v-model="editForm.ownerName" placeholder="业主名称"></el-input>
                </el-form-item>
                <el-form-item label="住址">
                    <el-select v-model="editForm.houseLocation" placeholder="住址">
                        <el-option v-for="item in houseLocationList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" required>
                    <el-radio v-model="editForm.gender" label="男" name="gender" />
                    <el-radio v-model="editForm.gender" label="女" name="gender" />
                </el-form-item>
                <el-form-item label="下单时间">
                    <el-date-picker v-model="editForm.serviceDate" type="date" value-format="yyyy-MM-dd"
                        placeholder="下单时间" />
                </el-form-item>
                <el-form-item label="类别">
                    <el-select v-model="editForm.jobCategory" placeholder="类别">
                        <el-option v-for="item in categoryList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="员工名称">
                    <el-select v-model="editForm.staffName" placeholder="员工名称">
                        <el-option v-for="item in staffNameList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="editForm.contactNumber" placeholder="联系电话"></el-input>
                </el-form-item>
                <el-form-item label="费用" required>
                    <el-input v-model="editForm.serviceFee" placeholder="费用"></el-input>
                </el-form-item>
                <el-form-item label="支付状态">
                    <el-select v-model="editForm.paymentStatus" placeholder="支付状态">
                        <el-option v-for="item in paymentStatusList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="评价">
                    <el-input v-model="editForm.comments" placeholder="评价"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="editFormSubmit">确定</el-button>
            <el-button type="default" @click="editDialogVisible = false">取消</el-button>
        </el-dialog>

        <!-- 新增弹窗 -->
        <el-dialog title="新增客户" :visible.sync="addDialogVisible" width="50%">
            <el-form ref="addForm" :model="addForm" label-width="100px">
                <el-form-item label="业主名称">
                    <el-input v-model="addForm.ownerName" placeholder="业主名称不能为空"></el-input>
                </el-form-item>
                <el-form-item label="住址">
                    <el-select v-model="addForm.houseLocation" placeholder="住址">
                        <el-option v-for="item in houseLocationList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" required>
                    <el-radio v-model="addForm.gender" label="男" name="gender" />
                    <el-radio v-model="addForm.gender" label="女" name="gender" />
                </el-form-item>
                <el-form-item label="下单时间">
                    <el-date-picker v-model="addForm.serviceDate" type="date" value-format="yyyy-MM-dd" placeholder="下单时间" />
                </el-form-item>
                <el-form-item label="类别">
                    <el-select v-model="addForm.jobCategory" placeholder="类别">
                        <el-option v-for="item in categoryList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="员工名称">
                    <el-select v-model="addForm.staffName" placeholder="员工名称">
                        <el-option v-for="item in staffNameList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="addForm.contactNumber" placeholder="联系电话"></el-input>
                </el-form-item>
                <el-form-item label="费用" required>
                    <el-input v-model="addForm.serviceFee" placeholder="费用不能为空"></el-input>
                </el-form-item>
                <el-form-item label="支付状态">
                    <el-select v-model="addForm.paymentStatus" placeholder="支付状态">
                        <el-option v-for="item in paymentStatusList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="评价">
                    <el-input v-model="addForm.comments" placeholder="评价"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="addFormSubmit">确定</el-button>
            <el-button type="default" @click="addDialogVisible = false">取消</el-button>
        </el-dialog>
    </div>
</template>

<script>
import { getByParam, update, add, deleteBatch, deleteById, getHouseInfo, getServiceInfo, getCategory, getName } from '@/api/psm/serviceInfo'

export default {
    name: 'serviceInfo',
    data() {
        return {
            // 数据表单信息
            tableData: [],
            currentPage: 1,
            pageNum: 1,
            pageSize: 10,
            total: 0,
            // 搜索条件
            keyword: {
                staffName: '',
                jobCategory: ''
            },
            // 下拉框信息
            houseLocationList: [],
            ownerNameList: [],
            categoryList: [],
            staffNameList: [],
            paymentStatusList: [],
            // 上传excel的对话框
            dialogExcelVisible: false,
            // 批量删除
            ids: [],
            // 编辑弹窗
            editDialogVisible: false,
            editForm: {
                staffName: '',
                contactNumber: '',
                serviceFee: '',
                paymentStatus: '',
                comments: '',
                ownerName: '',
                houseLocation: '',
                gender: '',
                serviceDate: '',
                jobCategory: ''
            },

            // 新增弹窗
            addDialogVisible: false,
            addForm: {
                staffName: '',
                contactNumber: '',
                serviceFee: '',
                paymentStatus: '',
                comments: '',
                ownerName: '',
                houseLocation: '',
                gender: '',
                serviceDate: '',
                jobCategory: ''
            },
        }
    },

    created() {
        this.fetchData()
    },

    methods: {
        // 初始化数据
        fetchData() {
            // 获取下拉框信息
            this.getInfo()
            // 传入搜索条件
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                staffName: this.keyword.staffName,
                jobCategory: this.keyword.jobCategory
            }
            // 获取列表数据
            getByParam(params).then(response => {
                console.log("staffInfo列表, response", response)
                this.tableData = response.data.list
                this.total = response.data.total
            })
        },

        // 删除的选中行
        handleSelectionChange(selectionRowArray) {
            this.ids = [];
            for (let i = 0; i < selectionRowArray.length; i++) {
                this.ids.push(selectionRowArray[i].serviceId)
            }
        },

        // 批量删除
        handleDleteBatch() {
            this.$confirm('确定删除选中的[' + this.ids + ']条数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBatch(this.ids).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.currentPage = 1;
                    this.fetchData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 打开编辑弹窗
        handleEdit(index, row) {
            // 传递本行数据给编辑弹窗
            this.editForm = row
            console.log("编辑, row", row)
            // 传入下拉框信息
            this.getInfo();
            this.editDialogVisible = true
        },

        // 编辑弹窗提交
        editFormSubmit() {
            console.log("编辑, editForm", this.editForm)
            update(this.editForm).then(res => {
                console.log("编辑, res", res)
                this.$message({
                    type: 'success',
                    message: '编辑成功!'
                });
                this.editDialogVisible = false
                this.fetchData()
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: '编辑失败!'
                })
            })
        },

        // 开启新增弹窗
        handleAdd(index, row) {
            console.log("新增, row", row)
            this.addForm = {};
            this.addDialogVisible = true;
        },

        // 新增弹窗提交
        addFormSubmit() {
            // 检查业主，性别和费用是否为空
            if (!this.addForm.ownerName) {
                this.$message({
                    type: 'warning',
                    message: '业主名称不能为空!'
                });
                return;
            }
            if (!this.addForm.gender) {
                this.$message({
                    type: 'warning',
                    message: '性别不能为空!'
                });
                return;
            }

            if (!this.addForm.serviceFee) {
                this.$message({
                    type: 'warning',
                    message: '费用不能为空!'
                });
                return;
            }

            add(this.addForm).then(res => {
                console.log("新增, res", res)
                this.$message({
                    type: 'success',
                    message: '新增成功!'
                });
                this.addDialogVisible = false
                this.fetchData()
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: '新增失败!'
                });
            })
        },

        // 导出
        downloadExcel() {
            this.$confirm('确定要导出数据吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                window.location.href = "http://localhost:8081/serviceManagement/serviceInfo/download/excel"
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消导出数据！'
                })
            })
        },

        // 获取下拉框信息
        getInfo() {
            // 清空下拉框信息
            this.houseLocationList = []
            this.ownerNameList = []
            this.categoryList = []
            this.staffNameList = []
            this.paymentStatusList = []
            // 获取业主信息
            getServiceInfo().then(response => {
                console.log("业主信息, response", response)
                for (let i = 0; i < response.data.length; i++) {
                    this.paymentStatusList.push({
                        value: response.data[i].paymentStatus,
                        label: response.data[i].paymentStatus
                    })
                }
            })
            // 获取房屋信息
            getHouseInfo().then(response => {
                console.log("房屋信息, response", response)
                for (let i = 0; i < response.data.length; i++) {
                    this.houseLocationList.push({
                        value: response.data[i].houseLocation,
                        label: response.data[i].houseLocation
                    })
                }
            })
            // 获取员工类型
            getCategory().then(response => {
                console.log("员工类型, response", response)
                for (let i = 0; i < response.data.length; i++) {
                    this.categoryList.push({
                        value: response.data[i].jobCategory,
                        label: response.data[i].jobCategory
                    })
                }
            })
            // 获取员工姓名
            getName().then(response => {
                console.log("员工姓名, response", response)
                for (let i = 0; i < response.data.length; i++) {
                    this.staffNameList.push({
                        value: response.data[i].staffName,
                        label: response.data[i].staffName
                    })
                }
            })
        },

        // 页面大小变化
        handleSizeChange(val) {
            this.pageSize = val
            this.fetchData()
        },

        // 页码变化
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData()
        },

        // 搜索
        handleSearch() {
            this.fetchData()
        },

        handleDelete(index, row) {
            console.log("删除, row", row)
            this.$confirm('确定删除编号为 ' + row.serviceId + ' 的数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteById(row.serviceId)
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.currentPage = 1;
                        this.fetchData()
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 重置
        resetSearchForm() {
            this.keyword = {
                staffName: '',
                jobCategory: ''
            }
            this.fetchData()
        }
    }
}
</script>

<style scoped>
.customer-page {
    margin: 15px 30px;
}

.customer-table {
    width: 100%;
}

.el-table-column {
    text-align: center;
    /* 使表格列内容居中 */
}
</style>
